<template>
    <el-dialog title="功能资源明细" :visible.sync="outerVisible" width="40%" close-on-press-escape :close-on-click-modal="false">
        <div ref="element" class="middle gnan">
            <el-button type="primary" size="mini" class="button_search" @click="addGnzymx()">新增</el-button>
        </div >

        <div class="table_padding">
            <div class="table_content">
                <el-table :data="tableData" stripe border class="table_overflow" style="height: 400px">
                    <el-table-column v-if="false" prop="id"></el-table-column>
                    <el-table-column prop="gnzymxmc" label="功能资源明细名称" width="185"></el-table-column>
                    <el-table-column prop="qqlj" label="请求路径" width="300"></el-table-column>
                    <el-table-column prop="" label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button size="small" @click="modifyGnzymx(scope.row)"  type="text" ><i class="el-icon-edit-outline tb_ys"></i></el-button>
                            <el-button size="small" type="text" @click="delGnzymx(scope.row)"><i class="el-icon-delete tb_ys"></i></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="pageSize"
                        layout="total,sizes,  prev, pager, next, jumper"
                        :total="pageTotal">
                </el-pagination>
            </div>
        </div>
        <el-dialog width="30%" :title="dialogType === 'edit'?'修改功能资源明细':'新增功能资源明细'" :visible.sync="innerVisible" append-to-body @close="hiddenInner('gnzymx_formInline')">
            <el-form :model="gnzymx_formInline" :rules="rules" ref="gnzymx_formInline" class="demo-ruleForm" label-position="left" label-width="140px">
                <el-form-item label="功能资源名称" prop="gnzymc" class="sbj">
                    <el-input v-model="gnzymx_formInline.gnzymc" placeholder="功能资源名称（必填）"></el-input>   <!-- v-model 存放属性-->
                </el-form-item>
                <el-form-item label="请求路径" prop="qqlj" class="sbj">
                    <el-input v-model="gnzymx_formInline.qqlj" placeholder="请求路径（必填）"></el-input>   <!-- v-model 存放属性-->
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button v-show="add_btn_show" type="primary" @click="saveGnzymx()">确 定</el-button>
                <el-button v-show="modify_btn_show"type="primary" @click="saveUpdateGnzymx()">确 定</el-button>
                <el-button @click="innerVisible = false">取 消</el-button>
            </div>
        </el-dialog>
    </el-dialog>
</template>

<script>
    import {jcqxCnzymxFindListByPage, jcqxCnzymxAdd, jcqxCnzymxUpdate, jcqxCnzymxDel} from '../../../../api/app/xtgl0301/zygl.js'

    export default {
        name: "gnzymxDialog",
        data() {
            return {
                outerVisible: false,
                innerVisible: false,
                add_btn_show: false,
                modify_btn_show: false,
                gnzyid: '',
                dialogType: '',
                currentPage: 1,
                tableData: [],
                pageTotal: 0,
                pageSize: 10,
                gnzymxid: '',
                gnzymx_formInline: {
                    gnzymc: '',
                    qqlj: '',
                },
                rules: {
                    gnzymc : [{required: true, trigger: 'blur', message: '请输入功能资源名称'}],
                    qqlj : [{required: true, trigger: 'blur', message: '请输入请求路径'}],
                }
            }
        },
        methods : {
            async findGnzymxList() {
                let params = {
                    gnzyid: this.gnzyid,
                    page: this.currentPage,
                    pageSize: this.pageSize
                }
                let result = await jcqxCnzymxFindListByPage(params)

                if (result.code != "200") {
                    this.$notify({
                        title: '获取功能资源明细失败',
                        type: 'danger',
                        message: '删除失败',
                        dangerouslyUseHTMLString: true
                    });
                } else {
                    this.tableData = result.data.content
                    this.pageTotal = result.data.pageInfo.total
                }

            },
            showOuter(){
                this.outerVisible = true
            },
            hiddenOuter(){                                             //隐藏方法
                this.outerVisible = false
            },
            showInner(){                                               //显示方法
                this.innerVisible = true
            },
            hiddenInner(formName){

                this.innerVisible = false
                this.$refs[formName].clearValidate()
                this.$refs[formName].resetFields()
            },
            //每页显示条数改变事件
            handleSizeChange(val) {
                this.pageSize = val;
                this.findGnzymxList();//根据用户获取的每页显示页面数量显示页面
            },
            //当前页数改变事件
            handleCurrentChange(val) {
                this.currentPage = val;
                this.findGnzymxList();//获取用户点击的当前页后刷新页面数据
            },
            addGnzymx() {
                this.$nextTick(function(){
                    this.$refs['gnzymx_formInline'].clearValidate()
                })
                for(let key in this.gnzymx_formInline){
                    this.gnzymx_formInline[key]=""
                }
                this.dialogType = ''
                this.add_btn_show = true
                this.modify_btn_show = false
                this.showInner()
            },
            saveGnzymx() {
                this.$refs['gnzymx_formInline'].validate(async (valid) => {
                    if (valid) {
                        let params = {
                            gnzyid: this.gnzyid,
                            gnzymxmc: this.gnzymx_formInline.gnzymc,
                            qqlj: this.gnzymx_formInline.qqlj
                        }

                        let result = await jcqxCnzymxAdd(params)

                        if (result.code != "200") {
                            this.$notify({
                                title: '失败',
                                type: 'danger',
                                message: '新增资源明细失败，失败原因：' + result.data.message,
                                dangerouslyUseHTMLString: true
                            });
                        } else {
                            this.$notify({
                                title: '成功',
                                type: 'success',
                                message: '新增资源明细成功',
                                dangerouslyUseHTMLString: true
                            });
                            this.hiddenInner('gnzymx_formInline')
                            await this.findGnzymxList()
                            this.$emit('findListGnzy')
                        }
                    } else {
                        return false
                    }

                })
            },
            modifyGnzymx(row) {
                this.add_btn_show = false
                this.modify_btn_show = true
                this.dialogType = 'edit'
                this.gnzymxid = row.id;
                this.gnzymx_formInline.gnzymc = row.gnzymxmc
                this.gnzymx_formInline.qqlj = row.qqlj
                this.showInner()
            },
            saveUpdateGnzymx() {
                this.$refs['gnzymx_formInline'].validate(async (valid) => {
                    if (valid) {
                        let params = {
                            id: this.gnzymxid,
                            gnzymxmc: this.gnzymx_formInline.gnzymc,
                            qqlj: this.gnzymx_formInline.qqlj
                        }

                        let result = await jcqxCnzymxUpdate(params)

                        if (result.code != "200") {
                            this.$notify({
                                title: '失败',
                                type: 'danger',
                                message: '修改资源明细失败，失败原因：' + result.data.message,
                                dangerouslyUseHTMLString: true
                            });
                        } else {
                            this.$notify({
                                title: '成功',
                                type: 'success',
                                message: '修改资源明细成功',
                                dangerouslyUseHTMLString: true
                            });
                            this.hiddenInner('gnzymx_formInline')
                            await this.findGnzymxList()

                        }
                    } else {
                        return false
                    }

                })
            },
            async delGnzymx(row) {
                this.$confirm('确定删除吗?', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning'
                }).then(async () => {
                    let params = {
                        id : row.id
                    }
                    let data = await jcqxCnzymxDel(params);

                    if (data.code === 200) {
                        this.$notify({
                            title: '成功',
                            type: 'success',
                            message: '删除成功',
                            dangerouslyUseHTMLString: true
                        });
                        this.$emit('findListGnzy')

                        await this.findGnzymxList()
                    } else {
                        this.$notify({
                            title: '失败',
                            type: 'danger',
                            message: '删除失败',
                            dangerouslyUseHTMLString: true
                        });
                    }
                });
            },

        }
    }
</script>

<style scoped>
    @import "../../../../styles/app0301.scss";

    .sbj {
        margin-top: 15px;
    }
</style>